<template>
    <div
        class="share-bg"
        v-if="shareTips"
        @click.self.prevent="closeShare"
    >
        <div
            class="share-main"
            ref="imageWrapper"
        >
            <slot>
                <img
                    class="share-main-bg"
                    src="@/assets/images/goodsDetail/goods-share-bg.jpg"
                />
                <div class="user-info-box">
                    <img
                        class="user-img"
                        :src="'data:image/png;base64,'+headerImgUrl"
                        @load="headerImgReady"
                    />
                    <div class="user-info">
                        <div class="user-name-id">{{decodeURI(userInfo.nick_name)}} <span class="id-color">ID：{{userInfo.id}}</span></div>
                        <div class="user-tips">我已领了这款精品</div>
                    </div>
                </div>
                <div class="share-img-box">
                    <img
                        class="share-img"
                        :src="'data:image/png;base64,'+shareImgUrl"
                        @load="makeShareImg"
                    />
                </div>
                <img
                    class="share-price-bg"
                    src="@/assets/images/goodsDetail/goods-share-price.png"
                    @load="priceImgReady"
                    v-if="goodsInfo.is_upgrade<1"
                />
                <img
                    class="share-price-bg"
                    src="@/assets/images/goodsDetail/goods-share-price2.png"
                    @load="priceImgReady"
                    v-else
                />
                <div class="share-price"><span class="share-price-symbol">￥</span>{{goodsInfo.price_market/100}}</div>
                <div class="qrcode-box">
                    <div
                        class="qrcode"
                        ref="qrCodeUrl"
                    ></div>
                </div>
            </slot>
        </div>
        <div class="share-tips">长按图片可发送给好友一起参与~</div>
    </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
export default {
    name: 'ShareImg',
    props: [
        'shareTips',
        'userInfo',
        'goodsInfo',
        'shareImgUrl',
        'headerImgUrl'
    ],
    data() {
        return {
            headerImgIsReady: false,
            priceImgIsReady: false
        }
    },
    methods: {
        headerImgReady() {
            this.headerImgIsReady = true
        },
        priceImgReady() {
            this.priceImgIsReady = true
        },
        makeShareImg() {
            const that = this
            if (this.headerImgIsReady && this.priceImgIsReady) {
                this.makeCode()
            } else {
                setTimeout(() => {
                    that.makeShareImg()
                }, 500)
            }
        },
        makeCode() {
            let routeHref = window.location.href
            let qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: routeHref,
                width: 85,
                height: 85,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
            this.$nextTick(() => {
                this.toImage()
            })
        },
        toImage() {
            const that = this
            html2canvas(this.$refs.imageWrapper, {
                backgroundColor: null
            }).then(canvas => {
                let dataURL = canvas.toDataURL('image/png')
                document.querySelector('.share-main').innerHTML =
                    '<img width="100%" src="' + dataURL + '" />'
                this.$emit('closeLoading')
            })
        },
        closeShare() {
            this.$emit('closeShare')
        }
    }
}
</script>

<style lang="stylus" scoped>
.share-bg
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0, 0, 0, 0.7)
    z-index 9
    display flex
    flex-direction column
    justify-content center
    align-items center
    .share-main
        position relative
        width 300px
        height 501px
        .share-img
            display block
            width 300px
            margin 0 auto
        .share-main-bg
            position absolute
            top 0
            left 0
            width 300px
            height 501px
        .user-info-box
            position absolute
            top 20px
            left 0
            right 70px
            display flex
            align-items center
            padding 0 15px
            .user-img
                width 50px
                height 50px
                border-radius 100%
            .user-info
                flex 1
                margin-left 10px
                .user-name-id
                    font-size 12px
                    color #333
                    .id-color
                        margin-left 10px
                        color #999
                .user-tips
                    margin-top 5px
                    font-size 14px
                    font-weight bold
                    color #ab2023
        .share-img-box
            position absolute
            top 80px
            left 0
            right 0
            text-align center
            .share-img
                width 270px
                height 270px
        .share-price-bg
            position absolute
            top 240px
            left 20px
            width 100px
            height 82px
        .share-price
            position absolute
            top 240px
            left 20px
            width 100px
            height 82px
            line-height 70px
            text-align center
            font-size 28px
            color #ab2023
            font-weight bold
            font-style italic
            .share-price-symbol
                font-size 13px
                margin-right 3px
        .qrcode-box
            position absolute
            bottom 35px
            right 20px
            width 85px
            height 85px
    .share-tips
        margin-top 0.37rem
        text-align center
        font-size 0.38rem
        color #fff
</style>

